.page-container {

    .container {
        position: relative;
        z-index: 2;

        .white-bg {
            background-color: #f7f7f7;
        }

        .tab-bar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-top: 60rpx;

            .tab-item {
                flex: 1;
                text-align: center;
                font-size: 30rpx;
                color: #fff;
                cursor: pointer;
                position: relative;
                padding-bottom: 18rpx;

                &.active {
                    color: #7b4af5;

                    &::after {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                        width: 23rpx;
                        height: 6rpx;
                        display: block;
                        content: '';
                        background-color: #7b4af5;
                    }
                }
            }
        }

        .search-wrapper {
            height: 110rpx;
            display: flex;
            align-items: center;

            .search {
                display: flex;
                align-items: center;
                height: 70rpx;
                width: calc(100vw - 40rpx);
                background-color: #fff;
                margin: 0 auto;
                border-radius: 70rpx;

                .search-icon {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 15rpx;
                    margin-left: 28rpx;
                }

                .search-input {
                    flex: 1;
                    height: 60rpx;
                    line-height: 60rpx;
                    font-size: 28rpx;
                }
            }
        }

        .order-list {
            padding-bottom: 50rpx;
            .order-item {
                width: calc(100vw - 80rpx);
                margin: 0 auto;
                display: flex;
                padding: 20rpx 20rpx 40rpx;
                background-color: #ffffff;
                margin-bottom: 25rpx;
                border-radius: 30rpx;
                position: relative;

                .order-image {
                    width: 190rpx;
                    height: 268rpx;
                    margin-right: 20rpx;
                    border-radius: 30rpx;
                }

                .order-info {
                    flex: 1;

                    .order-name {
                        display: flex;
                        justify-content: space-between;

                        .name {
                            color: #000;
                            font-size: 30rpx;
                            margin-bottom: 20rpx;
                            max-width: 370rpx;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }

                        .status {
                            font-size: 26rpx;

                            &.pending {
                                color: #e77258;
                            }

                            &.completed {
                                color: #56b438;
                            }

                            &.canceled {
                                color: #888888;
                            }

                            &.refunded {
                                color: #74b2a8;
                            }
                        }
                    }

                    .order-time {
                        font-size: 25rpx;
                        font-size: 26rpx;
                        margin-bottom: 5rpx;
                    }

                    .order-address {
                        font-size: 25rpx;
                        font-size: 26rpx;
                        margin-bottom: 5rpx;
                    }

                    .order-price {
                        font-size: 25rpx;
                        font-size: 26rpx;
                    }
                }

                .order-actions {
                    right: 20rpx;
                    bottom: 20rpx;
                    position: absolute;

                    .action-btn {
                        display: inline-block;
                        margin-left: 25rpx;
                        font-size: 28rpx;
                        border-radius: 30rpx;
                        cursor: pointer;
                        font-size: 24rpx;
                        background-color: transparent;
                        height: 50rpx;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;

                        &::after {
                            border: none;
                        }

                        &.cancel {
                            color: #888;
                            border: 1rpx solid #888;
                        }

                        &.pay {
                            color: #f272d4;
                            border: 1rpx solid #f272d4;
                        }

                        &.refund {
                            border: 1rpx solid #e29494;
                            color: #e29494;
                        }
                    }
                }
            }

            .no-more,
            .loading {
                text-align: center;
                margin-top: 20rpx;
                color: #999;
                font-size: 30rpx;
            }
        }
    }
}

.refund-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    transition: 0.3s ease;
    z-index: 999;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    background-color: rgba(0,0,0,0.2);
    &.show {
        opacity: 1;
        pointer-events: unset;
        visibility: visible;
    }

    .popup {
        position: absolute;
        width: 706rpx;
        background-color: #fff;
        border-radius: 20rpx;
        top: 0;
        left: 0;
        left: 22rpx;
        top: 50%;
        transform: translateY(-50%);
        padding: 35rpx;
        box-sizing: border-box;
        .popup-title{
            width: 100%;
            text-align: center;
            font-size: 34rpx;
            color: #000;
            margin-bottom: 20rpx;
        }
        .confirm-btn{
            width: 100%;
            height: 62rpx;
            border-radius: 62rpx;
            background-color: #f272d4;
            text-align: center;
            line-height: 62rpx;
            font-size: 35rpx;
            color: #fff;
            transition: 0.3s ease;
        }
        .disabled{
            opacity: 0.4;
            pointer-events: unset;
        }
        .refund-list{
            width: 100%;
            height: 40vh;
            margin-bottom: 20rpx;
        }
        .item{
            width: 100%;
            margin-bottom: 20rpx;
        
        }
        .t1{
            width: 100%;
            font-size: 30rpx;
            color: #000;
            margin-bottom: 10rpx;
            margin-left: 10rpx;
        }
        .t2{
            width: 100%;
            font-size: 24rpx;
            color: #888888;
            margin-left: 10rpx;
        }
        .close{
            position: absolute;
            width: 93rpx;
            height: 93rpx;
            bottom: -150rpx;
            left: calc((100% - 93rpx) / 2);
            image{
                width: 93rpx;
                height: 93rpx;
            }
        }
    }
}